<template>
	<h3>MutationDemo</h3>
	<p>count:{{ count }}</p>
	<button @click="add">add</button>
	<button @click="add(10)">add 10</button>
	<button @click="add({ n: 20 })">add 20</button>
	<hr />
	<p>name:{{ name }}</p>
	<button @click="setName({name:'HalfEgg'})">setName</button>
    <button @click="increment({n:1})">increment</button>
</template>

<script>
	import { mapState,mapMutations } from "vuex";
	import { SET_NAME } from "../store/mutation-types";
	export default {
		computed: {
			...mapState(["count", "name"]),
		},
		methods: {
			// add(n = 1) {
			// 	// this.$store.commit("increment")
			// 	this.$store.commit("increment", n);
			// },
			// add(n) {
			// 	// this.$store.commit("increment")
			// 	this.$store.commit("increment", n);
			// },
			add(payload) {
				// this.$store.commit("increment")
				// this.$store.commit("increment", payload);
				this.$store.commit({
					type: "increment",
					n: 20,
				});
			},
			// setName(name) {
			// 	this.$store.commit({
			// 		type: SET_NAME,
			// 		name,
			// 	});
			// },
            ...mapMutations(["increment"]),
            ...mapMutations({
                setName:SET_NAME
            })
		},
	};
</script>

<style>
</style>